import React, { Component } from 'react';
import { SideBar } from 'antd-mobile';
import { category_list, category_subcate } from '../../utils/api.js'
import { Swiper } from 'antd-mobile';
import '../../view/Index/Cate.scss';
import Search from '../../components/Allsearch.jsx';
import { Router } from 'react-router-dom'

class Cate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tab: [],
            nav2: [],
            nav3: [],
        }

    }
    componentDidMount() {
        category_list().then((res) => {
            this.setState({
                tab: res.data.list,
            })
            category_subcate({ id: res.data.list[0].id }).then((res) => {
                this.setState({
                    nav2: res.data.subcate
                }, () => {
                    console.log(this.state.nav2)
                })
            })
        })
    }
    handleChange = (key) => {
        console.log(key)
        category_subcate({ id: key }).then((res) => {
            console.log(res.data.subcate);
            this.setState({
                nav2: res.data.subcate
            })

        })

    }
    handleClick(item) {
        this.props.history.push({ pathname: '/index/allgoods', state: { id: item.id } });
    }
    render() {
        return (
            <div className='cate'>
                <div className="top">
                    <p>分类</p>
                    <Search {...this.props} />
                </div>
                <div className="bottom">
                    <div className="left">
                        <SideBar onChange={this.handleChange} defaultActiveKey={225510} >
                            {this.state.tab.map(item1 => (
                                <SideBar.Item key={item1.id} title={item1.name} color="red" />
                            ))}
                        </SideBar>
                    </div>
                    <div className="right">
                        {/* 轮播图 */}
                        <div className="imgBox">
                            <Swiper autoplay>
                                {
                                    this.state.nav2.billboards && this.state.nav2.billboards.map((item, index) => (
                                        <Swiper.Item key={index}>
                                            <div>
                                                <img src={item.pic} alt="banner" />
                                            </div>

                                        </Swiper.Item>
                                    ))
                                }
                            </Swiper>
                        </div>
                        {/* 二级分类 */}
                        <div className='subcate'>
                            {
                                this.state.nav2.subcategory && this.state.nav2.subcategory.map((item2, index2) => {
                                    return (
                                        <div className="cate2" key={index2}>
                                            <div className="name">
                                                {item2.name}</div>
                                            <div className="list">{
                                                item2.subNavs.map((item3, index3) => {
                                                    return (
                                                        <div className="subNays" key={index3} onClick={() => {
                                                            this.handleClick(item3)
                                                        }}>
                                                            <img src={item3.pic} />
                                                            <div className='text'>{item3.name}</div>
                                                        </div>
                                                    )
                                                })
                                            }</div>
                                        </div>

                                    )

                                })
                            }
                        </div>
                    </div>
                </div>


            </div >
        );
    }
}

export default Cate;